<script>
/**
 * 盒子
 *  */
import {
  defineComponent,
  ref,
  getCurrentInstance,
  reactive,
  toRef,
  computed,
  onMounted,
  onActivated,
  watch,
} from 'vue';
import pancake from './pancake.vue';
export default defineComponent({
  components: {

    pancake
  },
  props: {
    dataInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  setup(props) {

    const dataContainer = reactive({
      loading: false,
      dataInfo: {
        data: [
          { value: 0, name: '当前储热量' ,percentage:0},
          { value: 0, name: '可储热量' ,percentage:0},]
      },
      dataInfo1: {
        data: [
          { value: 0, name: '当前储电量',percentage:0 },
          { value: 0, name: '可储热量' ,percentage:0},]
      }
    });
    watch(
            () => props.dataInfo,
            (newDataInfo) => {
                
                newDataInfo.left?.forEach((v,index)=>{
                  dataContainer.dataInfo.data[index].value=v.toFixed(2)
                })
               
                newDataInfo.right?.forEach((v,index)=>{
                  dataContainer.dataInfo1.data[index].value=v.toFixed(2)
                })
            },
            {
                immediate: true,
                deep: true,
            },
        )
    onMounted(() => {

    });
    return {
      dataContainer,

    };
  },
});
</script>

<template>
  <div class="center-1">
    <div class="left">
      <div class="backdian">
        储热量占比
      </div>
      <div class='text_box'>
        <div class="kuai">
          <div class="dian"></div>
          <p class="psone">当前储热量 {{ (dataContainer.dataInfo.data[0].value)*1000/10}}%</p>
          <!-- <p class="pstwo">  {{ ((()/dataContainer.dataInfo.data[0].value)*100).toFixed(2) }}%</p> -->
        </div>
        <div class="kuai">
          <div class="dian" style="background:#9efcb8"></div>
          <p class="psone">可储热量 {{ (dataContainer.dataInfo.data[1].value)*1000/10 }}%</p>
          <!-- <p class="pstwo">{{ ((dataContainer.dataInfo.data[1].value/dataContainer.dataInfo.data[0].value)*100).toFixed(2) }}%</p> -->
        </div>

      </div>
      <pancake :dataInfo="dataContainer.dataInfo" style="transform:translateY(-2.813rem);"></pancake>
    </div>
    <div class="right">
      <div class="backdian">
        储电量占比
      </div>
      <div class='text_box'>
        <div class="kuai">
          <div class="dian"></div>
          <p class="psone">当前储电量 {{ dataContainer.dataInfo1.data[0].value*1000/10 }}%</p>
          <!-- <p class="pstwo"></p> -->
        </div>
        <div class="kuai">
          <div class="dian" style="background:#9efcb8"></div>
          <p class="psone">可储热量 {{ dataContainer.dataInfo1.data[1].value*1000/10 }}%</p>
          <!-- <p class="pstwo"></p> -->
        </div>

      </div>
      <pancake :dataInfo="dataContainer.dataInfo1" style="transform:translateY(-2.813rem);"></pancake>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.center-1 {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .left,
  .right {
    height: 100%;
    width: 50%;
    position: relative;
    padding: 0 1.250rem;

    .text_box {
      display: flex;
      justify-content: space-between;
      margin-top: 1.000rem;

      .kuai {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .dian {
          width: 0.625rem;
          height: 0.625rem;
          background: #05CFF7;
          margin-right: 0.625rem;
        }

        .psone {
          font-size: 0.875rem;
          color: rgba(212, 237, 253, 0.6);
        }

        .pstwo {
          color: #05CFF7;
          margin-left: 0.625rem;
        }
      }
    }

    .backdian {
      background: url('@/assets/images/backdian.png') no-repeat;
      background-size: 100% 100%;
      color: #D8F0FF;
      padding: 0.313rem 1.875rem;
      margin-top: 0.625rem;
    }

    .borderRa {
      position: absolute;
      width: 4.688rem;
      height: 4.688rem;
      border-radius: 50%;
      background: linear-gradient(180deg, #1dacc8, #2b3c4a);
      // border-image: linear-gradient(180deg, rgba(166, 206, 255, 0), rgba(166, 206, 255, 0.3), rgba(166, 206, 255, 0)) 1 1;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 0.750rem;
      text-align: center;

      p:nth-child(1) {
        margin-top: 1.250rem;
        font-weight: bold;
      }

    }
  }
}
</style>
